import { message } from 'antd';
import axios from 'axios';
import React from 'react';
import { Url } from '../url';
import 'braft-editor/dist/output.css'
import { Card } from 'antd';

import { Typography } from 'antd';
import { Empty, Button } from 'antd';


const { Title, Text } = Typography;



const { Meta } = Card;
export class News extends React.Component {


    state = {
        newsList: []
    }

    componentDidMount = () => {

        this.getNewsList();
    }


    getNewsList = () => {
        axios.get(Url.newsAll).then(
            (response) => {
                this.setState({
                    newsList: [...response.data]
                });
            })
            .catch((error) => {
                message.error("Network Error");
            });
    }




    render = () => {


        if (this.state.newsList.length === 0) {
            return <Empty
                description={
                    <span>
                        Now News Found
                    </span>
                }
            >
            </Empty>
        } else {


            const gridStyle = {
                width: '50%',
                textAlign: 'center',
            };

            const cardList = this.state.newsList.map(news => {
                return <Card.Grid style={gridStyle}>
                    <Title level={2}><a href={"/#/news/" + news.id} style={{color: "black"}}>{news.title}</a></Title>
                    <Text italic style={{ color: "gray", }}> {(new Date(news.editTime)).toLocaleDateString() + " " + (new Date(news.editTime)).toLocaleTimeString()}</Text>
                    <div style={{ maxHeight: "30vh", overflow: "hidden", marginTop: "16px" }}>
                        <div dangerouslySetInnerHTML={{ __html: news.detail }}></div>
                    </div>
                </Card.Grid>
            });

            return (
                <div style={{ width: "100vw", display: "flex", justifyContent: "center" }}>
                    <div style={{ width: "70%" }}>
                        <div style={{ marginTop: "32px" }}><Title leve={2}>Welcome to Daily News</Title></div>
                        <Card style={{ marginTop: "32px" }}>
                            {cardList}
                        </Card>
                    </div>

                </div >
            )
        }
    }
}
